<template>
    <div ref="editorRef" style="height: 100%; width: 100%; background-color: #f8f8f8;"></div>
</template>
<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
self.MonacoEnvironment = {
    getWorker(_, label) {
        if (label === 'json') {
            return new jsonWorker()
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
            return new cssWorker()
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return new htmlWorker()
        }
        if (['typescript', 'javascript'].includes(label)) {
            return new tsWorker()
        }
        return new EditorWorker()
    },
}


let editor
const editorRef = ref(null)
const initEditor = () => {
    console.log('initEditor')
    monaco.editor.defineTheme('myTheme', {
        base: 'vs',
        inherit: true,
        rules: [{ background: 'f8f8f8' }],
        colors: {
            'editor.foreground': '#000000',
            'editor.background': '#f8f8f8',
            'editorCursor.foreground': '#8B0000',
            'editor.lineHighlightBackground': '#f5f5f5',
            'editorLineNumber.foreground': '#008800',
            'editor.selectionBackground': '#88000030',
            'editor.inactiveSelectionBackground': '#88000015',
        },
    })
    monaco.editor.setTheme('myTheme')
    editor = monaco.editor.create(editorRef.value, {
        value: '', //编辑器初始显示文字
        language: 'javascript', //语言支持自行查阅demo
        automaticLayout: true, //自动布局
        // theme: 'vs', //官方自带三种主题vs, hc-black, or vs-dark
        foldingStrategy: 'indentation', // 代码可分小段折叠
        overviewRulerBorder: false, // 不要滚动条的边框
        scrollbar: {
            // Subtle shadows to the left & top. Defaults to true.
            useShadows: false,

            // Render vertical arrows. Defaults to false.
            verticalHasArrows: false,
            // Render horizontal arrows. Defaults to false.
            horizontalHasArrows: false,

            // Render vertical scrollbar.
            // Accepted values: 'auto', 'visible', 'hidden'.
            // Defaults to 'auto'
            vertical: 'auto',
            // Render horizontal scrollbar.
            // Accepted values: 'auto', 'visible', 'hidden'.
            // Defaults to 'auto'
            horizontal: 'auto',

            verticalScrollbarSize: 10,
            horizontalScrollbarSize: 10,
            arrowSize: 10,
            //小地图
            minimap: {
                enabled: false,
            },
        },
        autoIndent: true, // 自动布局
        tabSize: 4, // tab缩进长度
        autoClosingOvertype: 'always',
        roundedSelection: false
    });
    editor.onDidChangeModelContent((val) => {
        const v = editor.getValue();
        console.log(123, v)
    })
}
onMounted(async () => {
    await nextTick()
    initEditor()

})
onBeforeUnmount(() => {
    editor && editor.dispose()
})
</script>